<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from 'vue';
import {getCarousel3dList} from '@http'
import { message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/index'
const imgContainer = {w: 80, h: 80}
const boxContainer = {w: 1200, h: 840}
const imgHalf = {w: imgContainer.w/2, h: imgContainer.h/2}
const boxHalf = {w: boxContainer.w / 2, h: boxContainer.h / 2}
interface Point {
  x?: number,
  y?: number,
  r?:number,
  key?: number
}
interface ResultList {
  name: string | number,
  id: number,
  icon: string,
  mark: string
}
// interface EleList extends ResultList {
//   name: string | number,
//   id: number
// }
type radius = number|number[]
// 画正圆从开始位置要偏移的度数
const siteOffsetR = ref(20)
// 画椭圆的偏移角度
const roundOffsetR = ref(110)
// 画圆时的起始点角度 
const roundStartSiteR = -90
//  圆半径的 长度
const circleRadiusExtent = ref<radius>(0)
// 是画正圆还是画椭圆  "oval" || "circle"
const round = ref("circle")
// 每一步要跨的度数的密度，数越小密度越大，不能是0 (0.1 ~ 5)
// 建议是偶数 或 2 or 3
const density = ref(3)

const showMoveSiteCount = false

let trme = ref()
const activeImg = ref<number>(1)
const flag = ref(true)
const pointData = reactive<Point[]>([])
const pointListData = reactive<Point[]>([])
const list = reactive<ResultList[]>([])

// 画圆的半径
const getCircleRadiusLine = (round: string): radius => {
  if(round === "oval"){
    return 320
  }
  return new Array<number>(390, 350)
}
// 获取画圆半径的最长值和最短值
const getRoundRadiusMinOrMax = (roundRadius: number | number[]) => {
  if(Array.isArray(roundRadius)){
    const max = Math.max(...roundRadius) 
    const min = Math.min(...roundRadius)
    return {max, min}
  }
  return {max: roundRadius, min: roundRadius}
}
// 圆的周长
const getRoundLength = (roundRadius: radius): number => {
  if(Array.isArray(roundRadius)){
    return (roundRadius[1] / roundRadius[0]) * (roundRadius[1] + roundRadius[0])
  }
  return Math.PI * 2 * roundRadius
}
const roundLength = getRoundLength(circleRadiusExtent.value)

// 画椭圆形
const getCircleRoundPointItem = (r: number, piLine: number[]): Point => {
  const cr = r / 180 * Math.PI
  const max = Math.max(...piLine) 
  const min = Math.min(...piLine)
  const offsetR = roundOffsetR.value / 180 * Math.PI
  const LINEPI = (max * min) / Math.sqrt((max**2 * Math.sin(cr)**2) + (min**2 * Math.cos(cr)**2))
  const lx = LINEPI * Math.sin(cr)
  const ly = LINEPI * Math.cos(cr)
  // 增加画圆的偏移角度
  const x = boxHalf.w - (lx * Math.cos(offsetR) + ly * Math.sin(offsetR)) - imgHalf.w
  const y = boxHalf.h + (-lx * Math.sin(offsetR) + ly * Math.cos(offsetR)) - imgHalf.h
  return {x, y, r: r - roundStartSiteR}
}
// 画正圆形
const getRoundPointItem = (r: number, piLine: number): Point => {
  // 计算对角线的长度所需基数（2pi/360）
  const offsetR = siteOffsetR.value
  const PI = 0.017453292
  const x = boxHalf.w - piLine * Math.sin((r + offsetR) * PI) - imgHalf.w
  const y = boxHalf.h + piLine * Math.cos((r + offsetR) * PI) - imgHalf.h
  return {x,y, r: r - roundStartSiteR}
}
// 开始画圆
const getRoundPoint = (r: number): Point => {
  if(!Array.isArray(circleRadiusExtent.value)){
    return getRoundPointItem(r, circleRadiusExtent.value)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
  }
  return getCircleRoundPointItem(r, circleRadiusExtent.value)
}

const lenR = computed(() => {
  return Math.round(pointData.length / list.length)
})
watch(activeImg, (val, oldVal) => {
  console.log(val, oldVal);
  
})
onMounted(() => {
  circleRadiusExtent.value = getCircleRadiusLine(round.value)
  const {max} = getRoundRadiusMinOrMax(circleRadiusExtent.value)
  if(max*2 > boxContainer.h) {
    message.error('2倍圆的半径不能超过父级的大小！')
    return
  }
  //  初始化所有点数
  for(let i = 0, r = 0; r < 360; r += density.value, i++){
    const ele = getRoundPoint(r + roundStartSiteR)
    pointData[i] = { ...ele, key: i }
  }
  getCarousel3dList<ResultList[]>().then(({code, data, msg}) => {
    if(code === 200) {
      list.push(...data)
      data.forEach((item,index) => {
        //  设置元素的点数
        const _key = index * lenR.value
        // const keyr = index * (360 / list.length)
        // const ele = pointData.find(ele => ele.r === keyr)
        pointListData[index] = {
          key: _key,
          ...pointData[_key]
        }
      })
      console.log(data, list);
      
    } else {
      message.error(msg)
    }
  })
})
const setElePoint = (lenR: number, fn?: Function) => {
  if(trme){
    clearInterval(trme.value)
  }
  flag.value = false
  let count = 0
  if(lenR > 0) {
    activeImg.value = activeImg.value - 1
    if(activeImg.value < 1){
      activeImg.value = list.length
    }
  }else{
    activeImg.value = activeImg.value + 1
    if(activeImg.value > list.length){
      activeImg.value = 1
    }
  }
  trme.value = setInterval(() => {
    if(count >= Math.abs(lenR)){
      clearInterval(trme.value)
      flag.value = true
      fn && fn()
      return
    }
    count++
    pointListData.forEach((item, index) => {
      let key = lenR > 0 ? (item.key || 0) + 1 : (item.key || 0) - 1
      if(lenR > 0 && key >= pointData.length){
        key = 0
      }
      if(lenR < 0 && key < 0){
        key = pointData.length - 1
      }
      pointListData[index] = {
        key,
        ...pointData[key]
      }
    })
  }, 30) 
}
const rightBtn = () => {
  if(!flag.value) return
  setElePoint(-lenR.value)
}
const leftBtn = () => {
  if(!flag.value) return
  setElePoint(lenR.value)
}
const scaleIndex = (index: number) => {
  const max = 1.5
  const min = 0.75
  if(index === (activeImg.value  -1)){
    return max
  }
  const temp = index - (activeImg.value - 1)
  const r = temp > 0 ? temp : temp + list.length
  const l = temp < 0 ? Math.abs(temp) : list.length - temp
  const c = r < l ? r : l
  return max- ((max - min) * 2 / list.length *c )
}
const translateIndex = (index: number) => {
  const scale = scaleIndex(index)
  return (imgContainer.h - imgContainer.h * scale) / 2 / scale
}
const changeItem = (index: number) => {
  if(index + 1 === (activeImg.value - 1)){
    return
  }
  if(!flag.value) return
  // const n = Math.abs(index + 1 - activeImg.value)
  // let r = lenR * n
  // if(n < Math.round(list.value.length / 2)){
  //   r = -r
  // }
  // console.log(n, index+1);
  
  // setElePoint(r, () => {
  //   flag.value = true
  //   activeImg.value = index + 1
  // })
}
</script>

<template>
<div class="content">
  <div class="left-btn" @click="leftBtn"></div>
  <div class="box-bg" v-if="pointListData.length && showMoveSiteCount" :style="{
    width: boxContainer.w+'px',
    height: boxContainer.h+'px'
  }">
    <div
      class="icon-item" 
      v-for="(item, index) in pointData.values()" 
      :key="index"
      :style="{
        width: imgContainer.w+'px',
        height: imgContainer.h+'px',
        left: item.x+'px',
        top:  item.y+'px'
      }"
      @click="() => changeItem(index)"
    >{{index}}</div>
  </div>
  <div class="box" v-if="pointListData.length" :style="{
    width: boxContainer.w+'px',
    height: boxContainer.h+'px'
  }">
    <div
      class="icon-item" 
      v-for="(item, index) in list.values()" 
      :key="item.id"
      :style="{
        width: imgContainer.w+'px',
        height: imgContainer.h+'px',
        left: pointListData[index].x+'px',
        top:  pointListData[index].y+'px'
      }"
      :class="{'active': activeImg === (index + 1)}"
      @click="() => changeItem(index)"
    >
      <div class="icon" :class="[item.icon]" :style="{
        transform: `scale(${scaleIndex(index)}) translateY(${translateIndex(index)}px)`
      }"></div>
      <div class="icon-label">
        <h3 class="title">{{item.name}}</h3>
        <span class="mark">{{item.mark}}</span>
      </div>
    </div>
  </div>
  <div class="right-btn" @click="rightBtn"></div>
</div>
</template>
<style lang="less" scoped>
  .content{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    .left-btn,.right-btn{
      position: absolute;
      top: 50%;
      width: 60px;
      height: 60px;
      z-index: 200;
      background-image: url("../../assets/homeImg/left-btn@2x.png");
      background-size: 100%;
      cursor: pointer;
      &:hover{
        background-image: url("../../assets/homeImg/left-btn-active@2x.png");
      }
    }
    .left-btn{
      left: 80px;
    }
    .right-btn{
      right: 80px;
      transform: rotateY(180deg);
    }
  }
  .box-bg,.box{
    position: absolute;
    width: 1000px;
    height: 1000px;
    // background-image: url("../assets/images/login-bg3.png");
    // background-size: 100% 100%;
    // background-repeat: no-repeat;
    // border: 1px solid transparent;
    .icon-item{
      position: absolute;
      width: 80px;
      height: 80px;
      .icon-label{
        position: absolute;
        left: -40px;
        top: 100%;
        width: 160px;
        text-align: center;
        .title{
          color: red;
          font-size: 17px;
          margin: 0;
          font-size: 22px;
        }
        .mark{
          color: #fff;
          font-size: 13px;
        }

      }
      &.active .icon.loophole{
        background-image: url("../../assets/homeImg/loophole-active@2x.png");
      }
      &.active .icon.testAll{
        background-image: url("../../assets/homeImg/testAll-active@2x.png");
      }
      &.active .icon.intelligence{
        background-image: url("../../assets/homeImg/intelligence-active@2x.png");
      }
      &.active .icon.hack{
        background-image: url("../../assets/homeImg/hack-active@2x.png");
      }
      &.active .icon.loopholeDB{
        background-image: url("../../assets/homeImg/loopholeDB-active@2x.png");
      }
      &.active .icon.portal{
        background-image: url("../../assets/homeImg/portal-active@2x.png");
      }
      .icon{
        width: 100%;
        height: 100%;
        display: block;
        background-size: 100% 100%;
        transition: transform 0.2s ease-in;
        &.loophole{
          background-image: url("../../assets/homeImg/loophole@2x.png");
        }
        &.testAll{
          background-image: url("../../assets/homeImg/testAll@2x.png");
        }
        &.intelligence{
          background-image: url("../../assets/homeImg/intelligence@2x.png");
        }
        &.hack{
          background-image: url("../../assets/homeImg/hack@2x.png");
        }
        &.loopholeDB{
          background-image: url("../../assets/homeImg/loopholeDB@2x.png");
        }
        &.portal{
          background-image: url("../../assets/homeImg/portal@2x.png");
        }

      }
    }
  }
  .box-bg{
    .icon-item{
      border: 1px solid darkgoldenrod;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: aqua;
    }
  }
</style>